<template>
<!--   <el-drawer v-model="isShowBikeTraceManage" :direction="direction">
    <template #title>
      <h2>选择单车轨迹时间点</h2>
    </template>
    <template #default>
      <div>
        <el-radio v-model="bikeTraceDateRadio" label='gj20201221' size="large"
        >2021-12-21</el-radio>
        <el-radio v-model="bikeTraceDateRadio" label='gj20201222' size="large"
        >2021-12-22</el-radio>
        <el-radio v-model="bikeTraceDateRadio" label='gj20201223' size="large"
        >2021-12-23</el-radio>
        <el-radio v-model="bikeTraceDateRadio" label='gj20201224' size="large"
        >2021-12-24</el-radio>
        <el-radio v-model="bikeTraceDateRadio" label='gj20201225' size="large"
        >2021-12-25</el-radio>
      </div>
      <div style="align-items: initial">
        <h3 style="text-align: initial">单车ID：</h3>
        <el-radio v-for="id in bikeID_only" v-model="selectID" :label=id @change="getSigleBikeTrace">{{id}}</el-radio>
      </div>
    </template>

    <template #footer>
      <div style="flex: border-box">
        <el-button @click="hideBikeTrace">显示/隐藏</el-button>
        <el-button type="primary" @click="getBikeTraceData">获取轨迹</el-button>
      </div>
    </template>
  </el-drawer>-->

  <!--内嵌弹出框-->
  <el-dialog
      v-model="isShowBikeTraceManage"
      title="选取日期与单车ID"
      width="30%"
      top="80px"
      :modal="false"
      style="position: absolute;left: 205px"
      draggable >
    <template #title>
      <h2>选择单车轨迹日期与ID</h2>
    </template>
    <template #default>
      <div>
        <h4 style="margin-left: 10px;display: flex">选择单车轨迹时间点：</h4>
        <el-radio v-model="bikeTraceDateRadio" label='gj20201221' size="large"
        >2020-12-21</el-radio>
        <el-radio v-model="bikeTraceDateRadio" label='gj20201222' size="large"
        >2020-12-22</el-radio>
        <el-radio v-model="bikeTraceDateRadio" label='gj20201223' size="large"
        >2020-12-23</el-radio>
        <el-radio v-model="bikeTraceDateRadio" label='gj20201224' size="large"
        >2020-12-24</el-radio>
        <el-radio v-model="bikeTraceDateRadio" label='gj20201225' size="large"
        >2020-12-25</el-radio>
      </div>
      <div>
        <h4 style="margin-left: 10px;display: flex">单车ID：</h4>
<!--<el-radio v-for="id in bikeID_only" v-model="selectID" :label=id @change="getSigleBikeTrace">{{id}}</el-radio>-->
        <el-select v-model="bikeID" value-key="id" placeholder="Select" style="width:334px">
          <el-option
              v-for="id in bikeID_only"
              :label=id
              :value="id"
              @click="getSigleBikeTrace(id)"
          >{{id}}</el-option>
        </el-select>
      </div>
      <div v-show="isShowTable" style=" margin-top:20px ">
        <h4 style="margin-left: 10px;margin-bottom:10px; display: flex">轨迹点分析：</h4>
        <el-table :data="tableData" border style="width: 100%"  height="250" :cell-style="{ textAlign: 'center' }">
          <el-table-column prop="id" label="ID" width="50"   />
          <el-table-column prop="date" label="Date"  />
          <el-table-column prop="address" label="Address" />
        </el-table>
      </div>
    </template>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="hideBikeTrace">显示/隐藏</el-button>
        <el-button type="primary" @click="getBikeTraceData">获取轨迹</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElMessageBox } from 'element-plus'
import "../pages/Map.vue";
import { ref, reactive, toRefs} from 'vue'
import store from "../store/index.js";
import axios from "axios";
import LineString from "ol/geom/LineString"
import Point from "ol/geom/Point"
import WKT from "ol/format/WKT";
import { Fill, Stroke, Style, Text , Circle, Icon} from "ol/style";
import {Cluster,Vector as VectorSource} from 'ol/source';
import {Vector as VectorLayer} from 'ol/layer';
import Feature from 'ol/feature';
import View from 'ol/View';
import {getCurrentInstance} from 'vue';
import { showLoading, hideLoading } from '../store/loading.js'


const isShowBikeTraceManage = ref(false)
const direction = ref('rtl')
const bikeTraceDateRadio = ref('gj20201221')


//TopMenu通过Home.vue传值
export interface ExposeType {
  getIsShowBikeTraceMsg:Function
}
//将TopMenu中的isshowBikeTrace值传入
const  getIsShowBikeTraceMsg = (val:boolean) => {
  isShowBikeTraceManage.value = val
}
//将值暴露
defineExpose({
  getIsShowBikeTraceMsg
})

/*单车轨迹*/
//初始化单车bikeTraceVector、bikeTraceSource
const bikeID_only=ref(null)
const bikeID=ref(null)
const selectID=ref(null)
const getData=ref(null)
const instance = getCurrentInstance();
const bikeTraceVector=ref(null)
const bikeTraceSource=ref(null)
const feature=ref([])
const featureCube=reactive([])
const pointFeature=ref(null)
const clusterSource=ref(null)
/*表格*/
const tableData =ref([])
//显示表格
const isShowTable=ref(false)
//清空featureCube
const clearFeatureCube=()=>{
  Object.keys(featureCube).map(key => {
    delete featureCube[key]
  })
}
//控制单车轨迹图层显示与隐藏
const isGetBikeData=ref(false)
const isGetOnlyBikeData=ref(false)
const isShowBikeTrace=ref(true)
bikeTraceSource.value=new VectorSource({})
//点聚合图层
clusterSource.value=new Cluster({
   distance: 10, // 要素将被聚合在一起的像素距离，默认为20
   minDistance: 20, // 聚合块之间的最小像素距离，默认为零
   source:bikeTraceSource.value,
 })
bikeTraceVector.value=new VectorLayer({
  name:'单车轨迹点',
  source:bikeTraceSource.value ,
  style: new Style({
    image: new Icon({
      opacity:1,
      scale: 0.05,
      src: "src/assets/轨迹点.svg"
    })
  })
})
//单车轨迹点样式
const bikePointStyle=()=>{
  return new Style({
    image: new Icon({
      opacity:1,
      scale: 0.1,
      src: "src/assets/自行车.svg"
    })
  })
}
//单车轨迹样式
const bikeLineStyle=()=>{
  return new Style({
    stroke: new Stroke({
      color: "#b51500",
      width: 5,
    }),
  })
}

//取消显示/显示
const hideBikeTrace=()=>{
  if(isShowBikeTrace.value){
    //隐藏单车图层
    bikeTraceVector.value.setVisible(false)
    isShowBikeTrace.value=!isShowBikeTrace.value
  }else{
    //显示
    bikeTraceVector.value.setVisible(true)
    isShowBikeTrace.value=!isShowBikeTrace.value
  }
}

const getBikeTraceData=()=>{
  //post后台单车轨迹点数据
  let bikeTraceDate={
    date:bikeTraceDateRadio.value
  }
  console.log(bikeTraceDate)
  //展示Loading
  showLoading()
  axios.post(store.state.dbApi+'/bikeTrace',bikeTraceDate).then(result=> {
    getData.value=result.data
    //获取单车ID
    let bikeID=[]
    for(let i=0;i<getData.value.length;i++)
    {
      bikeID[i]=getData.value[i]['bikeID']
    }
    //获取bikeID唯一值：
    bikeID_only.value = [...new Set(bikeID)]
    console.log(bikeID_only.value)
    //初始化getDate/释放数据重新读取
    if(isGetBikeData.value)
    {//已获取数据，清空变量
      getData.value=null
    }
    hideLoading()
    isGetBikeData.value=true
  })
}

const getSigleBikeTrace=(ID)=>{
  console.log('selectID:',ID)
//初始化getDate/释放数据重新读取
  if(isGetOnlyBikeData.value)
  {//已获取数据，清空变量
    bikeTraceSource.value.clear()
    feature.value=[]
    tableData.value=[]
  /*  pointFeature.value=null
    clearFeatureCube()*/
  }else{//未获取数据，加入图层，初始化图层
    store.state.map.addLayer(bikeTraceVector.value)
    store.state.checkDiyLayerList.push(bikeTraceVector.value.get('name'))
  }
  //获取数据库数据并通过WKT转换放入图层
  let lineCube=[]
  for(let i=0;i<getData.value.length;i++)
  {
    //轨迹点
    if(getData.value[i]['bikeID']==ID){
      feature.value.push(new WKT().readFeature(getData.value[i]['point']));
      lineCube.push([getData.value[i]['lat'],getData.value[i]['lon']])
      tableData.value.push(
          {
            id:getData.value[i]['id'],
            date:getData.value[i]['date']+''+getData.value[i]['time'],
            address:getData.value[i]['lon']+','+getData.value[i]['lat']
          }
      )
    }
  }
  console.log(tableData)
  let line=new LineString(lineCube)
  //线要素类
  let lineFeature = new Feature({
    geometry: line,
  });
  bikeTraceSource.value.addFeatures(feature.value)
  //已获取到数据
  isGetOnlyBikeData.value=true
  //表格展现
  isShowTable.value=true
}





</script>
